<template>
	<view class="container">
		<view class="pay-heared"></view>
		<view class="pay-info">
			<view class="pay-price">
				
			</view>
			<view class="pay-info-item">
				抱歉！处理失败，请您稍后重试。
			</view>
		</view>
		
		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-btn-con">
				<view class="footer-alone-btn-default" @click="toIndexPage">
					<view class="text">返回首页</view>
				</view>
				<view v-if="ordersn && orderid" class="footer-alone-btn-default " @click="repay">
					<view class="text re-pay">重新支付</view>
				</view>
			</view>
		</footer-fixed-bar>
	</view>
</template>

<script>
	import {toAppIndex} from '@/utils/toPath.js'
	import footerFixedBar from "@/components/footer-fixed-bar.vue";
	import orderpay from '@/utils/pay.js'
	export default {
		components: {
			footerFixedBar
		},
		data() {
			return {

			}
		},
		onLoad(options) {
			if(options.ordersn && options.orderid)
			{
				this.ordersn = options.ordersn;
				this.orderid = options.orderid;
			}
			else
			{
				uni.showToast({
					title: '参数信息有误',
					icon: 'none'
				})
			}
		},
		methods: {
			// 前往首页
			toIndexPage(){
				toAppIndex();
			},
			// 重新支付
			repay(){
				let self = this;
				let orderData = {
					ordersn:this.ordersn,
					orderid:this.orderid,
					pageType:1
				};
				orderpay(orderData,function(){
					// #ifdef MP-WEIXIN
					//小程序支付成功前往支付成功页
					uni.redirectTo({
						url:`/pages/order/paysuccess?ordersn=${self.ordersn}&orderid=${self.orderid}`
					})
					// #endif
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
	}

	.pay-heared {
		height: 100rpx;
		padding: 50rpx 24rpx 50rpx;
		background: url(https://static.member.stourweb.cn/uniapp/static/images/pay_fail_bg.jpg) center no-repeat;
		background-size: cover;

		.pay-tips {
			font-size: $uni-font-size-sm;
			color: $uni-text-color-inverse;
			margin-bottom: $uni-spacing-col-sm;
		}

		.pay-dis {
			font-size: 32rpx;
			color: $uni-text-color-inverse;

			text {
				color: #fff100;
			}
		}
	}

	.pay-info {
		margin: 0 26rpx;
		background: $uni-bg-color;
		padding: 12rpx $uni-spacing-row-sm $uni-spacing-row-sm;
		position: relative;
		display: block;

		.pay-price {
			text-align: center;
			font-size: $uni-font-size-base;
			padding-bottom: 80rpx;
			position: relative;
	
			&::after {
				content: '';
				display: block;
				width: 100%;
				border-bottom: 2rpx dashed $uni-border-color;
				transform: scale(1, 0.5);
				background: $uni-border-color;
				position: absolute;
				bottom: 0;
			}

			text {
				font-size: 44rpx;
			}
		}

		.pay-info-item {
			font-size: $uni-font-size-base;
			padding:52rpx 16rpx 190rpx;
			color: $uni-text-color;
			text-align: center;
		}
	}


	// 底部按钮
	.footer-btn-con {
		display: flex;
		
		.footer-alone-btn-default {
			flex: 1 1 auto;
			width: 50%;
			text-align: center;
			padding: 0 25rpx 22rpx 25rpx;
			background: $uni-bg-color-grey;
			.text {
				background: $uni-bg-color-primary;
				padding: 30rpx 0;
				color: $uni-text-color-inverse;
				border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-lg;
			}
			.re-pay{
				background: #ff6913;
			}
		}
		
	}
</style>
